<template>
  <DraggableModal
    :visible="props.showModal"
    title="高级查询"
    width="900px"
    @cancel="modalCancelFn"
    @ok="modalOkFn"
  >
    <Form
      ref="formRef"
      :model="state.formData"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
    >
      <Row>
        <Col :span="12">
          <a-form-item label="审批单号" name="specBillBatchNo">
            <a-input
              v-model:value="state.formData.specBillBatchNo"
              style="width: 220px"
            />
          </a-form-item>
        </Col>
        <Col :span="12">
          <a-form-item label="申请日期" name="createTime">
            <a-date-picker
              v-model:value="state.formData.createTime"
              style="width: 220px"
              valueFormat="YYYY-MM-DD"
            />
          </a-form-item>
        </Col>
      </Row>
      <Row>
        <Col :span="12">
          <a-form-item label="危险材料名称" name="specName">
            <a-input v-model:value="state.formData.specName" style="width: 220px" />
          </a-form-item>
        </Col>
        <Col :span="12">
          <a-form-item :label="$t('specimen.original_serial')" name="id">
            <a-input v-model:value="state.formData.id" style="width: 220px" />
          </a-form-item>
        </Col>
      </Row>
      <Row>
        <Col :span="12">
          <a-form-item label="目的地" name="destination">
            <a-input v-model:value="state.formData.destination" style="width: 220px" />
          </a-form-item>
        </Col>
        <Col :span="12">
          <a-form-item label="运出人员" name="couriers">
            <a-input v-model:value="state.formData.couriers" style="width: 220px" />
          </a-form-item>
        </Col>
      </Row>
      <Row>
        <Col :span="12">
          <a-form-item label="复核人" name="checker">
            <a-input v-model:value="state.formData.checker" style="width: 220px" />
          </a-form-item>
        </Col>
      </Row>
    </Form>
  </DraggableModal>
</template>

<script setup lang="ts">
import { Form, Row, Col } from 'ant-design-vue';
import { DraggableModal } from '@/framework/components/core/draggable-modal';
import type { FormInstance } from 'ant-design-vue';
import { reactive, ref } from 'vue';

export type State = {
  formData: {
    specBillBatchNo: '';
    createTime: '';
    specName: '';
    id: '';
    destination: '';
    couriers: '';
    checker: '';
  };
};
const props = withDefaults(
  defineProps<{
    showModal: boolean;
  }>(),
  {
    showModal: false,
  },
);
const emits = defineEmits<{
  (e: 'update:showModal', state: boolean): void;
  (e: 'searchFn', params: any): void;
}>();
/**
 * data
 */
const formRef = ref<FormInstance>();

const state: State = reactive({
  formData: {},
} as State);

/**
 * modal
 */
const modalOkFn = () => {
  emits('searchFn', state.formData);
  modalCancelFn();
};
const modalCancelFn = () => {
  emits('update:showModal', false);
  formRef.value?.resetFields();
};
</script>

<style scoped lang="less"></style>
